<template>
  <div class="classview">
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in banners">
          <van-image
            width="100%"
            height="168rem"
            radius="5rem"
            lazy-load
            :src="banner.model.cover"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- <div class="menu">
      <ul>
        <li v-for="item in 8" :key="item">
          <img src="" alt="" />
          <p>软件入门</p>
        </li>
      </ul>
    </div> -->

    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="list">
        <div class="item" v-for="item in list" :key="item">
          <div class="title">
            <h3>最新教程</h3>
          </div>
          <div class="cardbox">
            <div
              class="card"
              v-for="items in item"
              :key="items"
              @click="toDetail(items.id)"
            >
              <div class="video">
                <!-- <img :src="items.cover" alt="" /> -->
                <van-image
                  width="167rem"
                  height="95rem"
                
                  radius="5rem"
                  :src="items.cover"
                >
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" /> </template
                ></van-image>
              </div>
              <p>{{ items.title }}</p>
              <span
                >{{
                  NumberFilter(
                    items.author.userinfo.count.count_article_viewed
                  )
                }}次观看</span
              >
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script setup>
import { getClass, getTravel } from "../api/index";
import { ref } from "vue";

import { computed } from "@vue/runtime-core";
import { useRouter } from "vue-router";

const router = useRouter();
function toDetail(id) {
  router.push({
    path: "/detail",
    query: {
      id,
    },
  });
}

//过滤器
const NumberFilter = computed(() => {
  return (value) => {
    if (value < 10000) {
      return value;
    } else {
      let w = value > 10000 ? value / 10000 : value;
      let y = w > 10000 ? (w / 10000).toFixed(1) + "亿" : w.toFixed(1) + "万";
      return y;
    }
  };
});

const banners = ref([]);
getTravel().then((res) => {
  banners.value = res.data.data.children.filter(
    (o, index) => index == 0
  )[0].children;
  // console.log(banners.value);
});

const classList = ref([]);
getClass().then((res) => {
  classList.value = new Array(Math.ceil(res.data.data.list.length / 4))
    .fill(null)
    .map((o, i) => res.data.data.list.slice(i * 4, (i + 1) * 4));
  // console.log(classList.value);
});

//懒加载
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const index = ref(0);

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    list.value.push(classList.value[index.value]);
    index.value += 1;
    // console.log(list.value);

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 10) {
      finished.value = true;
    }
  }, 1000);
};
</script>

<style lang="scss" scoped>
.classview {
  background-color: #f5f5f5;
  padding-bottom: 70rem;
  .banner {
    padding: 15rem;
    background-color: #fff;

    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      // line-height: 150px;
      height: 168rem;
      text-align: center;
      background-color: #39a9ed;
      border-radius: 5rem;
      overflow: hidden;
    }
  }
  .menu {
    padding: 0 30rem;
    background-color: #fff;
    ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-right: 30rem;
        margin-bottom: 15rem;
        &:nth-child(4n) {
          margin-right: 0;
        }
        img {
          width: 50rem;
          height: 50rem;
          border-radius: 50%;
          margin-bottom: 10rem;
        }
      }
    }
  }
  .list {
    margin-top: 10rem;

    .item {
      padding: 0rem 15rem;
      background-color: #fff;
      margin-bottom: 10rem;
      .title {
        padding: 15rem 0 10rem 0;
        h3 {
          font-size: 18rem;
          color: #000;
          font-weight: bold;
        }
      }
      .cardbox {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .card {
          width: 167rem;
          height: 154rem;
          margin-right: 10rem;
          margin-bottom: 10rem;

          &:nth-child(2n) {
            margin-right: 0;
          }
          .video {
            border-radius: 5rem;
            overflow: hidden;
            img {
              width: 167rem;
              height: 95rem;
            }
          }
          p {
            width: 100%;
            font-size: 14rem;
            color: #333;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            height: 20rem;
            font-weight: bold;
            margin: 10rem 0;
          }
          span {
            font-size: 12rem;
            color: #666;
          }
        }
      }
    }
  }
}
</style>